<!-- eslint-disable no-shadow -->
<!-- eslint-disable no-console -->
<!-- eslint-disable no-empty -->
<!-- eslint-disable no-use-before-define -->
<script setup lang="ts">
import { reactive, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { Md5 } from 'ts-md5'
import { baseApi, userApi } from '@/api'
import { isWeChat, generateId } from '@/utils/common'
import { useUserStore } from '@/store'

const userStore = useUserStore()
const isWeChatOfficial = ref(true)
// #ifdef MP-WEIXIN
isWeChatOfficial.value = false
// #endif
const form = reactive({
  phone: '',
  sms_code: ''
})
const codeText = ref('')
const uCode = ref()
const useAliAuth = ref(false)
// 手机号验证
function mobileBlurFn() {
  const telReg = /^1[3456789]\d{9}$/
  if (form.phone !== '') {
    if (!telReg.test(form.phone)) {
      uni.showToast({
        title: '请输入正确的手机号',
        icon: 'none'
      })
    }
  } else {
    uni.showToast({
      title: '请输入手机号',
      icon: 'none'
    })
  }
}
function clearFn() {
  form.phone = ''
}
function handleClick() {
  const { phone, sms_code } = form
  if (!phone) {
    uni.showToast({
      title: '请输入手机号',
      icon: 'none'
    })
    return
  }
  // if (!sms_code) {
  //   uni.showToast({
  //     title: '请输入验证码',
  //     icon: 'none'
  //   })
  //   return
  // }
  doRegister()
  // 2023/6/20 需求更改为使用随机密码，不再跳转去手动输入密码
  // uni.redirectTo({
  //   url: `/pages/register/index?phone=${phone}&code=${sms_code}`
  // })
}
async function sendSmsCode() {
  if (uCode.value.canGetCode) {
    try {
      const { data } = await baseApi.smsSend({
        type: 1,
        phone: form.phone
      })
      uCode.value.start()
    } catch {}
  }
}
function codeChange(text: string) {
  codeText.value = text
}
// h5端 阿里云一键登录（这个未使用，h5直接在login页面获取并注册登录了）
// function isWifi() {
//   let isWifi = false
//   uni.getNetworkType({
//     success: (res) => {
//       isWifi = res.networkType === 'wifi'
//     }
//   })
//   return isWifi
// }
// const phoneNumberServer = new window.PhoneNumberServer()
// const getAuthToken = async () => {
//   const { data, code } = await userApi.getAuthToken({
//     origin: window.location.origin,
//     url: 'https://wap.blacksilverscore.com/#/pages/register/bindPhone'
//   })
//   if (code === 200) {
//     return data
//   }
//   throw new Error('获取accessToken或jwtToken失败')
// }
// const checkLogin = async (accessToken: any, jwtToken: any) => {
//   return new Promise((resolve, reject) => {
//     phoneNumberServer.checkLoginAvailable({
//       accessToken,
//       jwtToken,
//       success(res: any) {
//         console.log('身份鉴权成功, 可唤起登录界面', res)
//         resolve(res)
//       },
//       error(res: any) {
//         console.log('身份鉴权失败', res)
//         reject(res)
//       }
//     })
//   })
// }
// function getSpToken() {
//   phoneNumberServer.getLoginToken({
//     // 成功回调
//     async success(res: any) {
//       const { spToken } = res
//       const { data } = await userApi.getPhoneWithToken({ spToken })
//       const { mobile } = data
//       form.phone = mobile
//       await doRegister()
//     },
//     // 失败回调
//     error(res: any) {
//       uni.hideLoading()
//       if (isWifi()) {
//         uni.showModal({
//           title: '提示',
//           content: '请关闭wifi后重试',
//           showCancel: false,
//           success: ({ confirm }) => {
//             if (confirm) {
//               uni.showLoading()
//               setTimeout(() => {
//                 window.location.reload()
//               }, 2000)
//             }
//           }
//         })
//       }
//       console.log('error===>', res)
//     },
//     // 授权页状态监听函数
//     watch(status: any, data: any) {
//       console.log(status, data)
//     },
//     // 配置选项
//     authPageOption: {
//       navText: '',
//       subtitle: '', // 副标题
//       btnText: '立即登录',
//       agreeSymbol: '、',
//       showCustomView: false,
//       customView: {
//         element:
//           '<div class="btn_box other" onclick="clickEvent()">切换其他登录方式</div>',
//         style:
//           '.btn_box.other{background: #fff; color: #f00;text-align: center}',
//         js: 'function clickEvent(){alert(666666)}'
//       },
//       privacyBefore: '我已阅读并同意',
//       isDialog: true, // 是否是弹窗样式
//       manualClose: true // 是否手动关闭弹窗/授权页
//     }
//   })
// }
// async function getPhoneByAliSdk() {
//   uni.showLoading()
//   const { jwtToken, accessToken } = await getAuthToken()
//   if (await checkLogin(accessToken, jwtToken)) {
//     await getSpToken()
//   }
//   uni.hideLoading()
// }
// // =======END
async function doRegister() {
  try {
    uni.showLoading({
      title: '登录中',
      mask: true
    })
    const params = {
      loginType: userApi.LOGIN_TYPE_ENUM.PWD,
      phone: form.phone,
      code: form.sms_code || '123456',
      password: Md5.hashStr(generateId()),
      openId: userStore.openid,
      unionId: userStore.unionid,
      nickname:
        userStore.wxUserInfo.nickname ||
        form.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') ||
        '',
      avatar: userStore.wxUserInfo.headimgurl || ''
    }
    const shopCode = uni.getStorageSync('shopCode')
    const shareCode = uni.getStorageSync('shareCode')
    if (shareCode) {
      params.inviteCode = shareCode
    } else if (shopCode) {
      params.shopCode = shopCode
    }
    const { data } = await userApi.register(params)
    userStore.syncSetToken(data.accessToken)
    await userStore.getUserInfo()
    // #ifdef MP-WEIXIN
    uni.navigateBack()
    // #endif
    // #ifdef H5
    // phoneNumberServer.closeLoginPage()
    uni.redirectTo({ url: '/pages/launch/index?from=login' })
    // #endif
    uni.hideLoading()
  } catch {}
}
onLoad((option) => {
  if (option?.phone) {
    form.phone = option.phone
  }
  // #ifdef H5
  isWeChatOfficial.value = isWeChat()
  // getPhoneByAliSdk()
  // #endif
})
</script>
<template>
  <view class="container">
    <u-navbar
      back-text=""
      title="验证手机号"
      v-if="!isWeChatOfficial"
      :title-bold="true"
      color="#333"
    ></u-navbar>
    <view class="form" v-if="!useAliAuth">
      <view class="inputBox">
        <input
          class="inpt phone"
          type="number"
          v-model="form.phone"
          maxlength="11"
          @blur="mobileBlurFn"
          placeholder-class="placeholderStyle"
          placeholder-style="color: #D3DBE0;font-size: 34rpx;font-weight: normal;"
          placeholder="请输入手机号"
        />
        <cover-image
          v-if="form.phone"
          @tap="clearFn"
          class="close"
          src="https://naoyuekang-weixindev.oss-cn-chengdu.aliyuncs.com/mine/close.png"
        ></cover-image>
      </view>
      <!-- <view class="inputBox flex">
        <input
          class="inpt code"
          type="text"
          maxlength="6"
          v-model="form.sms_code"
          placeholder-class="placeholderStyle"
          placeholder-style="color: #D3DBE0;font-size: 34rpx;font-weight: normal;"
          placeholder="请输入验证码"
        />
        <u-button size="mini" type="success" @click="sendSmsCode">
          {{ codeText }}</u-button
        >
        <u-verification-code
          ref="uCode"
          @change="codeChange"
        ></u-verification-code>
      </view> -->
      <u-button
        type="primary"
        class="hy-btn"
        :ripple="true"
        @click="handleClick"
        >完成</u-button
      >
    </view>
  </view>
</template>

<style lang="scss" scoped>
.container {
  background: #fff;
  overflow: hidden;
  min-height: 100vh;
}

.placeholderStyle {
  color: #d3dbe0;
  font-size: 34rpx;
  font-weight: normal;
}

.logo {
  display: block;
  width: 200rpx;
  height: 200rpx;
  margin: 0 auto;
  margin-top: 100rpx;
  border-radius: 10rpx;
}

.form {
  padding: 200rpx 75rpx;
}

.inputBox {
  position: relative;
  border-bottom: 2rpx solid #e6ecf0;
  margin-bottom: 20rpx;
  &.flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .label {
    font-size: 36rpx;
    color: #333;
    font-weight: bold;
  }

  .inpt {
    display: block;
    width: 500rpx;
    padding: 30rpx 0;
    color: #242426;
    font-weight: bold;
    font-size: 34rpx;
  }

  .close {
    width: 28rpx;
    height: 28rpx;
    position: absolute;
    bottom: 0;
    right: 0;
    top: 0;
    margin: auto;
    z-index: 2;
  }
}

.hy-btn {
  margin: 70rpx 0 30rpx 0;

  &.wx {
    margin-top: 40rpx;
  }

  .hy-icon-wechat {
    color: #fff;
    margin-right: 15rpx;
    font-size: 36rpx;
  }
}
</style>
